@import './variables.less';

.parentContainer {
	display: flex;
	// justify-content: center;
	align-items: center;
}
.container {
	z-index: 10;
	width: 600px;
	height: 600px;
	display: flex;
	margin: 20px;
	overflow: hidden;
	.leftContainer {
		flex: 1;
		background-color: #2e2e2e;
		display: flex;
		align-items: center;
		flex-direction: column;
		.avatar {
			width: @avatar-left;
			height: @avatar-left;
			margin-top: 10px;
			margin-bottom: 10px;
			img {
				width: 100%;
				height: 100%;
				cursor: pointer;
			}
		}
		.iconList {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			ul {
				display: flex;
				flex-direction: column;
				align-items: center;
				li {
					margin: 6px 0;
					font-size: 20px;
					cursor: pointer;
				}
			}
		}
	}
	.rightContainer {
		flex: 17;
	}
}
.infoContent {
	display: flex;
	flex-direction: column;
	letter-spacing: 0;
	.infoContainer {
		flex: 1;
		padding-bottom: 20px;
		display: flex;
		.avatar {
			display: flex;
			justify-content: center;
			align-items: flex-end;
			margin-top: 10px;
			img {
				width: 80px;
				height: 80px;
			}
		}
		.info {
			padding-left: 20px;
			color: @font-color-lightest;
			font-size: 12px;
			display: flex;
			flex-direction: column;
			white-space: nowrap;
			.name {
				font-size: 30px;
				color: @font-color-light;
			}
		}
	}
	.btnContainer {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		border-top: 0.1px solid @primary-border_bg-color;
		padding: 12px 10px 0 10px;
		justify-content: space-between;
		font-size: 12px;
		button {
			display: flex;
			border-radius: 5px;
			font-size: 12px;
			justify-content: center;
			align-items: center;
		}
	}
}
// :global {
// 	.ant-tooltip {
// 		.ant-tooltip-content {
// 			.ant-tooltip-inner {
// 				background-color: @primary-color;
// 				color: @font-color-light;
// 				font-size: 0.12rem;
// 				border-radius: 0;
// 				letter-spacing: 0.02rem;
// 				padding: 0.02rem 0.04rem;
// 				min-width: 0;
// 				min-height: 0;
// 			}
// 		}
// 	}
// }
